<template>
  <el-container class="main_con">
    <div class="filter_con nopt">
      <div class="filter_area">
        <el-input class="serach_input mr_15 mt_15" v-model="obj.name" size="medium" placeholder="商品名称" style="width:300px;"></el-input>
        <!--
        <label class="mr_15 mt_15">审核状态</label>
        <el-select v-model="obj.audit" size="medium" placeholder="请选择" class="mr_15">
          <el-option
            v-for="item in audit"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
 -->
        <!-- <label class="mr_15">状态</label>
        <el-select v-model="obj.status" size="medium" placeholder="请选择" class="mr_15">
          <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select> -->

        <label class="mr_15 mt_15">创建时间</label>
        <date-picker size="medium" @change="getTime" class="mr_15 mt_15"></date-picker>
        <el-button class="mr_15 mt_15" @click="searchList" size="medium">搜索</el-button>
      </div>
    </div>
    <div class="list_con">
      <el-table :data="list" element-loading-text="" fit highlight-current-row>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="name" width="275" label="商品">
          <template slot-scope="scope">
            <div class="proImg">
              <vimage style="width: 40px; height: 40px;margin-right:10px;" :src="scope.row.master" fit="fit"></vimage>
              <span class="pro_t0" v-if="scope.row.type == 0">实</span>
              <span class="pro_t1" v-if="scope.row.type == 1">虚</span>
              <span style="flex: 1;">{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sell_price,original_price" label="售价/原价">
          <template slot-scope="scope">
            {{ scope.row.sell_price }}/{{ scope.row.original_price }}
          </template>
        </el-table-column>
        <el-table-column prop="total" label="库存"></el-table-column>
        <el-table-column prop="sell" label="销量"></el-table-column>
        <el-table-column prop="create_time" label="创建时间"></el-table-column>
        <el-table-column prop="audit_text" label="审核状态"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-has type="text" @click="showItem(scope.row.id)">查看</el-button>

            <el-button v-has v-if="scope.row.audit == 0" type="text" @click="auditItem(scope.row)">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer" style="flex-direction: row-reverse;" v-show="total != 0">
        <el-pagination @current-change="changePage" class="pages" background hide-on-single-page layout="prev, pager, next" :total="total"></el-pagination>
      </div>
    </div>
    <el-dialog title="查看商品" :visible.sync="readprod" width="1200px" top="20px">
      <div slot="title" class="d_title">
        <img src="@/assets/images/prod_icon.png" />
        <span>查看商品</span>
      </div>
      <proItem ref="readprod"></proItem>
    </el-dialog>
    <el-dialog title="审核商品" :visible.sync="showAudit" width="40%"><auditPro :obj="auditObj" @success="done"></auditPro></el-dialog>
  </el-container>
</template>

<script>
import DatePicker from '@/components/DatePicker/index';
import auditPro from './components/auditPro';
import proItem from './components/proItem';
import {getAuditProList} from '@/api/mall/product';

export default {
  data() {
    return {
      showAudit: false,
      audit: [
        {
          value: -1,
          label: '全部'
        },
        {
          value: 1,
          label: '已审核'
        },
        {
          value: 0,
          label: '未审核'
        }
      ],
      status: [
        {
          value: -1,
          label: '全部'
        },
        {
          value: 1,
          label: '上架'
        },
        {
          value: 0,
          label: '下架'
        }
      ],
      obj: {
        name: '',
        //status:-1,
        audit: [0, 2],
        begin_date: '',
        end_date: ''
      },
      objTemp: {},
      auditObj: {},
      total: 0,
      page: 1,
      size: 10,
      isLoading: false,
      readprod: false,
      list: [],
      listSelected: []
    };
  },
  components: {
    DatePicker,
    auditPro,
    proItem
  },
  created() {
    //判断商品列表性质
    switch (this.$route.name) {
      case 'productList':
        //销售中
        this.obj.status = 1;
        break;
      case 'productListStock':
        //仓库中
        this.obj.status = 0;
        break;
      default:
        //no code
        break;
    }
  },
  mounted() {
    this.searchList();
  },
  computed: {},
  methods: {
    //查看商品
    showItem(id) {
      // this.pid=id;
      this.readprod = true;
      this.$nextTick(() => {
        this.$refs.readprod.getData(id);
      });

      //this.$router.push({path:'/product/item',query:{'id':id,k:Math.random()}});
      // this.$router.push({
      //   name:'productItem',
      //   params:{
      //     id:id,
      //     onlyShow:true
      //   }
      // });
    },
    //关闭审核窗口
    done() {
      this.showAudit = false;
      this.getDataList();
    },
    //获取时间
    getTime(value) {
      this.obj.begin_date = value[0];
      this.obj.end_date = value[1];
    },
    //查询数据
    searchList() {
      //复制查询对象
      this.objTemp = Object.assign({}, this.obj);
      //判断是否删除字段
      // if(this.objTemp.status == -1){
      //   delete this.objTemp.status;
      // };
      if (this.objTemp.audit == -1) {
        delete this.objTemp.audit;
      }
      this.getDataList();
    },
    //查询数据本体
    getDataList() {
      this.isLoading = true;
      getAuditProList(this.objTemp, this.page, this.size).then(res => {
        this.isLoading = false;
        let o = res.msg;
        this.list = o.data;
        this.total = o.total;
      });
    },
    //审核数据
    auditItem(obj) {
      //this.$router.push({path:'/product/item',query:{'aid':obj.id,k:Math.random()}});
      this.auditObj = {
        id: obj.id,
        update_time: obj.update_time,
        audit_remark: '',
        audit: 0
      };
      this.showAudit = true;
    },
    //切换分页
    changePage(page) {
      this.page = page;
      this.getDataList();
    }
  }
};
</script>

<style lang="scss" scoped>
.proImg {
  display: flex;
  align-items: center;
}

.pro_t0 {
  color: #2d8cf0;
  background: #f0faff;
  border-radius: 5px;
  padding: 0 3px;
  margin-right: 5px;
}

.pro_t1 {
  color: #e6a23c;
  background: #d2efe0;
  border-radius: 5px;
  padding: 0 3px;
  margin-right: 5px;
}
.d_title {
  display: flex;
  align-items: center;
  img {
    margin-right: 16px;
    width: 42px;
    height: 42px;
  }
}
</style>
